import * as echarts from 'echarts';
import type { EChartsOption, EChartsType } from 'echarts';

export const initGaugeChart = (container: HTMLElement): EChartsType => {
  // 创建ECharts实例，使用canvas渲染器
  const myChart = echarts.init(container, null, {
    renderer: 'canvas',
    useDirtyRect: false
  });

  // 定义仪表盘配置选项
  const option: EChartsOption = {
    // 设置背景色为黑色
    backgroundColor: '#000',
    // 配置提示框
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    // 配置工具箱，包含恢复和保存图片功能
    toolbox: {
      feature: {
        restore: {},
        saveAsImage: {}
      }
    },
    // 定义多个仪表盘系列
    series: [
      // 主仪表盘（只显示刻度）
      {
        // 仪表盘名称
        name: 'panel',
        // 仪表盘类型
        type: 'gauge',
        // 最小值
        min: 0,
        // 最大值
        max: 550,
        // 层级
        z: 10,
        // 起始角度
        startAngle: 220,
        // 结束角度
        endAngle: -30,
        // 分割线数量
        splitNumber: 10,
        // 半径
        radius: '70%',
        // 中心位置
        center: ['40%', '55%'],
        // 轴线圆边框
        axisLine: {
          // 显示边框
          show: true,
          // 边框样式
          lineStyle: {
            // 宽度
            width: 2,
            // 颜色
            color: [
              // 白色范围(仪表盘刻度)
              [0.8, '#fff'],
              // 红色范围(超范围刻度)
              [1, '#f00']
            ]
          }
        },
        // 长刻度
        splitLine: {
          // 离圆边框距离
          distance: 10,
          // 长度
          length: 25,
          lineStyle: {
            // 颜色
            color: 'auto',
            // 宽度
            width: 3,
            // 阴影颜色
            shadowColor: 'rgba(255, 255, 255)',
            // 阴影模糊
            shadowBlur: 30,
            // 阴影偏移
            shadowOffsetY: 0
          }
        },
        // 短刻度
        axisTick: {
          // 离圆边框距离
          distance: 10,
          // 长度
          length: 10,
          lineStyle: {
            // 颜色
            color: 'auto',
            // 宽度
            width: 2,
            // 阴影颜色
            shadowColor: 'rgba(255, 255, 255)',
            // 阴影模糊
            shadowBlur: 15,
            // 阴影偏移
            shadowOffsetY: 0
          }
        },
        // 速度标签
        axisLabel: {
          // 离长刻度距离
          distance: 5,
          // 字体大小
          fontSize: 24,
          // 字体粗细
          fontWeight: 600,
          // 字体
          fontFamily: 'Arial',
          // 颜色
          color: '#fff'
        },
        // 添加动画配置
        animation: true,
        animationDuration: 50,  // 缩短动画时间
        animationEasing: 'linear',  // 使用线性动画
        animationThreshold: 0,  // 立即开始动画
        // 仪表盘指针
        pointer: {
          // 指针样式
          icon: 'path://M-36.5,23.9L-41,4.4c-0.1-0.4-0.4-0.7-0.7-0.7c-0.5-0.1-1.1,0.2-1.2,0.7l-4.5,19.5c0,0.1,0,0.1,0,0.2v92.3c0,0.6,0.4,1,1,1h9c0.6,0,1-0.4,1-1V24.1C-36.5,24-36.5,23.9-36.5,23.9z M-39.5,114.6h-5v-85h5V114.6z',
          // 指针宽度
          width: 12,
          // 指针偏移
          offsetCenter: [0, 0],
          // 指针长度
          length: '70%',
          itemStyle: {
            color: '#f00',
            shadowColor: 'rgba(255, 0, 0)',
            shadowBlur: 15,
            shadowOffsetY: 3
          }
        },
        // 仪表盘标题中的数据
        data: [{value: 0}],
        // 仪表盘详细信息配置
        detail: {
          show: false
        }
      },
      // 速度值显示
      {
        name: 'speed',
        type: 'gauge',
        min: 0,
        max: 1,
        startAngle: 0,
        endAngle:0,
        radius: 0,
        center: ['43%', '75%'],
        axisLine: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        // 添加动画配置
        animation: true,
        animationDuration: 50,  // 缩短动画时间
        animationEasing: 'linear',  // 使用线性动画
        animationThreshold: 0,  // 立即开始动画
        data: [{ value: 0 }],
        detail: {
          show: true,
          offsetCenter: [0, '35%'],
          formatter: '{a|{value}}{b|km/h}',
          rich: {
            a: {
              fontSize: 80,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              align: 'center',
              padding: [80, 10, 0, 0]
            },
            b: {
              fontSize: 24,
              fontWeight: 800,
              fontFamily: 'Arial',
              color: '#fff',
              padding: [0, 0, -100, 0]
            }
          }
        }
      }
    ]
  };

  // 设置图表配置
  myChart.setOption(option);

  // 使用 requestAnimationFrame 优化更新
  let lastUpdateTime = 0;
  const updateInterval = 1000 / 60; // 60fps

  // WebSocket连接和重连逻辑
  let ws: WebSocket | null = null;
  let reconnectTimer: number | null = null;

  const connectWebSocket = () => {
    try {
      ws = new WebSocket('ws://127.0.0.1:30000');

      ws.onmessage = (event: MessageEvent) => {
        const currentTime = performance.now();
        if (currentTime - lastUpdateTime >= updateInterval) {
          const data = JSON.parse(event.data);
          // 更新仪表盘数据
          myChart.setOption({
            series: [
              {
                name: 'panel',
                data: [{ value: data.speed }]
              },
              {
                name: 'speed',
                data: [{ value: data.speed }]
              }
            ]
          });
          lastUpdateTime = currentTime;
        }
      };

      ws.onerror = (error: Event) => {
        console.error('WebSocket错误:', error);
        if (ws) {
          ws.close();
        }
      };

      ws.onclose = () => {
        console.log('WebSocket连接已关闭，准备重连...');
        if (reconnectTimer === null) {
          reconnectTimer = window.setTimeout(() => {
            reconnectTimer = null;
            connectWebSocket();
          }, 1000);
        }
      };

      ws.onopen = () => {
        console.log('WebSocket连接成功');
      };
    } catch (error) {
      console.error('WebSocket连接失败:', error);
      if (reconnectTimer === null) {
        reconnectTimer = window.setTimeout(() => {
          reconnectTimer = null;
          connectWebSocket();
        }, 1000);
      }
    }
  };

  // 初始连接
  connectWebSocket();

  // 清理函数
  const cleanup = () => {
    if (ws) {
      ws.close();
    }
    if (reconnectTimer !== null) {
      clearTimeout(reconnectTimer);
    }
  };

  // 在图表销毁时清理WebSocket连接
  myChart.on('dispose', cleanup);

  return myChart;
}; 